<template>
  <div class="home">
    <div class="home-container">
      <div class="home-top">
        <div class="home-top-list1">
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">概况</div>
                <div class="home_icon_text" @click="refreshData">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
            </div>
            <div class="home_body">
              <div v-if="loading" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading" class="home_head_content">
                <div class="home-top-top-date">
                  <div
                    v-for="(item, index) in liaxiaoshu"
                    :key="index"
                    class="data-item"
                  >
                    <span class="data-label">{{ item.label }}</span>
                    <p class="data-value">{{ item.value }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="home-top-list3">
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">客户</div>
                <div class="home_icon_text" @click="refreshData1">
                  <i class="el-icon-refresh icon1"></i>
                </div>
              </div>
            </div>
            <div class="home_body">
              <div v-if="loading1" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading1" class="home_head_content">
                <div class="home-top-top-date1">
                  <div
                    v-for="(item, index) in homeData1.records"
                    :key="index"
                    class="data-item1"
                  >
                    <span class="data-label">{{ item.label }}</span>
                    <p class="data-value">{{ item.value }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- //供应商 -->
        <div class="home-top-list3">
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">供应商</div>
                <div class="home_icon_text" @click="refreshData2">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
            </div>
            <div class="home_body">
              <div v-if="loading2" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading2" class="home_head_content">
                <div class="home-top-top-date1">
                  <div
                    v-for="(item, index) in homeData2.records"
                    :key="index"
                    class="data-item1"
                  >
                    <span class="data-label">{{ item.label }}</span>
                    <p class="data-value">{{ item.value }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 销售 -->
      <div class="home-bottom">
        <div class="home-bottom-left">
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">销售</div>
                <div class="home_icon_text" @click="refreshData3">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
              <div v-if="loading3" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
            </div>
            <div
              class="home_body_list1"
              v-for="(item, index) in homeData3.records"
              :key="index"
            >
              <div v-if="!loading3" class="home_body_item11">
                <h3 style="font-weight: 500">{{ item.label }}</h3>
                <div class="home_body_item1_content">
                  <div class="home_body_item1_content_item1">
                    <div class="head_info">
                      今日笔数<span class="head_info_label">{{
                        item.m_amt
                      }}</span>
                      今日金额
                      <p class="head_info_value">{{ item.m_count }}</p>
                    </div>
                    <div class="head_info_label2">
                      本周:{{ item.t_amt }}
                      <div class="head_info_label3">
                        本月:{{ item.t_count }}
                      </div>
                    </div>

                    <div class="head_info_label2">
                      本周:{{ item.t_amt }}
                      <div class="head_info_label3">
                        本月:{{ item.t_count }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 采购 -->
          <div class="home_head">
            <div class="home_head_content">
              <div class="home_icon">采购</div>
              <div class="home_icon_text" @click="refreshData4">
                <i class="el-icon-refresh"></i>
              </div>
            </div>
            <div v-if="loading4" class="home_loading">
              <el-row :gutter="20">
                <el-col :span="16"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="8"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="16"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="8"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="16"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="8"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="8"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="4"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="16"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
                <el-col :span="4"
                  ><div class="grid-content bg-purple"></div
                ></el-col>
              </el-row>
            </div>
          </div>

          <div
            class="home_body_list1"
            v-for="(item, index) in homeData4.records"
            :key="index"
          >
            <div v-if="!loading4" class="home_body_item1">
              <h3 style="font-weight: 500">{{ item.label }}</h3>
              <div class="home_body_item1_content">
                <div class="home_body_item1_content_item1">
                  <div class="head_info">
                    今日笔数<span class="head_info_label">{{
                      item.m_amt
                    }}</span>
                    今日金额
                    <p class="head_info_value">{{ item.m_count }}</p>
                  </div>
                  <div class="head_info_label2">
                    本周:{{ item.t_amt }}
                    <div class="head_info_label3">本月:{{ item.t_count }}</div>
                  </div>

                  <div class="head_info_label2">
                    本周:{{ item.t_amt }}
                    <div class="head_info_label3">本月:{{ item.t_count }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="home-bottom-center">
          <!-- 销售金额 -->
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">销售金额</div>
                <div class="home_icon_text" @click="refreshData5">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
              
            </div>
            <div class="home_body">
              <div v-if="loading5" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
               
              </div>
              <div v-if="!loading5" class="home_head_content">
                <div class="home-top-top-date1">
                  <div
                    v-for="(item, index) in homeData5.records"
                    :key="index"
                    class="data-item1"
                  >
                    <span class="data-label">{{ item.label }}</span>
                    <p class="data-value">{{ item.value }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 毛利润 -->
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">毛利润</div>
                <div class="home_icon_text" @click="refreshData6">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
            </div>
            <div class="home_body">
              <div v-if="loading6" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading6" class="home_head_content">
                <div class="home-top-top-date1">
                  <div
                    v-for="(item, index) in homeData6.records"
                    :key="index"
                    class="data-item1"
                  >
                    <span class="data-label">{{ item.label }}</span>
                    <p class="data-value">{{ item.value }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 采购金额 -->
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">采购金额</div>
                <div class="home_icon_text" @click="refreshData7">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
            </div>
            <div class="home_body">
              <div v-if="loading7" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading7" class="home_head_content">
                <div class="home-top-top-date1">
                  <div
                    v-for="(item, index) in homeData7.records"
                    :key="index"
                    class="data-item1"
                  >
                    <span class="data-label">{{ item.label }}</span>
                    <p class="data-value">{{ item.value }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 库存结存金额 -->
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">库存结存金额</div>
                <div class="home_icon_text" @click="refreshData8">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
            </div>
            <div class="home_body nnnn111">
              <div ref="echarts" class="echarts"></div>
              <div v-if="loading8" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading8" class="home_head_content"></div>
            </div>
          </div>

          <!-- 处理中主要单据 -->
        </div>

        <div class="home-bottom-right">
          <div class="home-top-list1-title">
            <div class="home_head">
              <div class="home_head_content">
                <div class="home_icon">处理中主要单据</div>
                <div class="home_icon_text" @click="refreshData9">
                  <i class="el-icon-refresh"></i>
                </div>
              </div>
            </div>
            <div class="home_body">
              <div v-if="loading9" class="home_loading">
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="8"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="16"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                  <el-col :span="4"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
              </div>
              <div v-if="!loading9" class="home_head_content">
                <div class="home-top-top-ttt">
                  <span>编制中</span>
                  <span>待核批</span>
                  <span>执行中</span>
                </div>
                <div class="home-top-top-date2">
                  <div
                    class="home-top-top-date2-item"
                    v-for="(item, index) in homeData111.records"
                    :key="index"
                  >
                    <span class="home-top-top-date2-name">{{ item.name }}</span>
                    <span class="home-top-top-date2-name">{{ item.appr }}</span>
                    <span class="home-top-top-date2-name">{{ item.edit }}</span>
                    <span class="home-top-top-date2-name">{{ item.exec }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  getHomeData,
  getHomeKh,
  getHomeGys,
  getHomeDD,
  getHomeCg,
  getHomeXsje,
  getHomeMlr,
  getHomeCgje,
  getHomeJcje,
  getHomeZudj,
} from "@/api/shouye";
export default {
  data() {
    return {
      homeData: {
        records: [],
      },
      homeData1: {
        records: [],
      },
      homeData2: {
        records: [],
      },
      homeData3: {
        records: [],
      },
      homeData4: {
        records: [],
      },
      homeData5: {
        records: [],
      },
      homeData6: {
        records: [],
      },
      homeData7: {
        records: [],
      },
      homeData111: {
        records: [],
      },
      homeData2222: [],
      x: [],
      y: [5000, 10000, 15000, 20000, 25000, 30000],

      //加载
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      loading6: false,
      loading7: false,
      loading8: false,
      loading9: false,
      option: {},
      myChart: null,
    };
  },
  //保留两位小数
  computed: {
    liaxiaoshu() {
      return this.homeData.records.map((item) => ({
        ...item,
        value: parseFloat(item.value).toFixed(2),
      }));
    },
  },
  methods: {
    //1
    async getHomedata() {
      this.loading = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeData(data);
      if (res.success) {
        this.homeData = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading = false; //结束加载
    },
    //客户
    async getHomekh() {
      this.loading1 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeKh(data);
      if (res.success) {
        this.homeData1 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading1 = false; //结束加载
    },
    //供应商
    async getHomegys() {
      this.loading2 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeGys(data);
      if (res.success) {
        this.homeData2 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading2 = false; //结束加载
    },
    //销售
    async getHomedd() {
      this.loading3 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeDD(data);
      if (res.success) {
        this.homeData3 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading3 = false; //结束加载
    },
    //采购
    async getHomecg() {
      this.loading4 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeCg(data);
      if (res.success) {
        this.homeData4 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading4 = false; //结束加载
    },
    //销售金额
    async getHomexs() {
      this.loading5 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeXsje(data);
      if (res.success) {
        this.homeData5 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading5 = false; //结束加载
    },
    //毛利润
    async getHomemlr() {
      this.loading6 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeMlr(data);
      if (res.success) {
        this.homeData6 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading6 = false; //结束加载
    },
    //采购金额
    async getHomecgje() {
      this.loading7 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getHomeCgje(data);
      if (res.success) {
        this.homeData7 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading7 = false; //结束加载
    },
    //库存结存金额
    async getHomejcje() {
      this.loading8 = true; //开始加载
      this.myChart = echarts.init(this.$refs["echarts"]);
      console.log(this.$refs["echarts"]);
      let params = {
        _t: Math.floor(new Date().getTime() / 1000),
      };
      let res = await getHomeJcje(params);
      console.log(res.result.records);
      let data = res.result.records;
      data.forEach((item) => {
        this.x.push(item.x);
        this.y.push(item.y);
      });
      console.log(this.x, this.y);
      this.option = {
        tooltip: {},
        xAxis: {
          data: this.x,
        },
        yAxis: {
          // data: [0, 10000, 20000, 30000, 40000, 50000],
          // type: "value",
        },
        series: [
          {
            type: "bar",
            data: this.y,
          },
        ],
      };
      this.myChart.setOption(this.option);
      this.loading8 = false; //结束加载
    },

    //处理中主要单据
    async getHomezudj() {
      this.loading9 = true; //开始加载
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
        pageSize: 100,
      };
      let res = await getHomeZudj(data);
      if (res.success) {
        this.homeData111 = res.result;
      } else {
        console.error("获取数据失败");
      }
      this.loading9 = false; //结束加载
    },
    //更新
    refreshData() {
      this.getHomedata();
      console.log(1111);
    },
    //2
    refreshData1() {
      this.getHomekh();
      console.log(2222);
    },
    //3
    refreshData2() {
      this.getHomegys();
      console.log(3333);
    },
    //4
    refreshData3() {
      this.getHomedd();
      console.log(3333);
    },
    //5
    refreshData4() {
      this.getHomecg();
      console.log(4444);
    },
    //6
    refreshData5() {
      this.getHomexs();
      console.log(5555);
    },
    //7
    refreshData6() {
      this.getHomemlr();
      console.log(6666);
    },
    //8
    refreshData7() {
      this.getHomecgje();
      console.log(7777);
    },
    //9
    refreshData8() {
      this.getHomejcje();
      console.log(8888);
    },
    //10
    refreshData9() {
      this.getHomezudj();
      console.log(9999);
    },
  },

  mounted() {
    this.getHomedata();
    this.getHomekh();
    this.getHomegys();
    this.getHomedd();
    this.getHomecg();
    this.getHomexs();
    this.getHomemlr();
    this.getHomecgje();
    this.getHomejcje();
    // this.initChart();
    this.getHomezudj();
  },
};
</script>

<style scoped>
.home-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* //栅格布局 */
  
}
.home-top-left {
  width: 50%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-top-center {
  width: 25%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-top-right {
  width: 25%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-top-left_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 18px;
  /* font-weight: bold; */
  margin-bottom: 20px;
  text-align: left;
  height: 30px;
  background-color: #fff;
  display: block;
  line-height: 30px;
  padding: 10px 20px 10px 20px;
  margin-left: 20px;
  border-bottom: #dddddd 1px solid;
}
.home_icon {
  width: 20%;
}
.home {
  width: 100%;
  height: 100%;
  margin: 4px 4px 0px 6px;
  display: grid;
  /* grid-template-columns: 2fr 1fr;
  /* grid-template-rows: repeat(3, 1fr); */

}
.home-top-top-date {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}
.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(30% - 20px);
  min-width: 125px;

  border-radius: 4px;
  padding: 10px;
}
.home-container {
  box-sizing: border-box;
}
.home-top {
  display: flex;
  position: relative;
  height: auto;
  /* display: block; */
}

  .home-top-list1 {
    width: 50%;
    display: block;
  }
  .home-top-list3 {
    width: 25%;
    display: block;
    margin-left: 10px;
  }


  .home-top-list1 {
    width: 50%;
    display: block;
  }
  .home-top-list3 {
    width: 25%;
    display: block;
    margin-left: 10px;
  }


  .home-top-list1 {
    width: 50%;
    display: block;
  }
  .home-top-list3 {
    width: 25%;
    display: block;
    margin-left: 10px;
  }

.home-top-list1-title {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}
.home_head {
  min-height: 48px;
  margin-bottom: -1px;
  padding: 0 24px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 2px 2px 0 0;
  zoom: 1;
}
.home_body {
  /* min-height: 48px; */
  margin-bottom: -1px;
  padding: 0 2px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 2px 2px 0 0;
  zoom: 1;
}
.home_head_content {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
}
.home_icon {
  width: 50%;
  display: inline-block;
  -ms-flex: 1;
  flex: 1;
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
}
.home_icon_text {
  float: right;
  margin-left: auto;
  padding: 16px 0;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-size: 14px;
}
.el-icon-refresh {
  color: #1890ff;
  cursor: pointer;
  transition: color 0.3s;
}
.icon1 {
}

.home_head_content {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
}
.data-label {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  font-size: 12px;
  line-height: 22px;
  margin-bottom: 4px;
}
.data-value {
  color: rgba(0, 0, 0, 0.85);
  font-size: 24px;
  line-height: 32px;
  margin: 0;
}
.home-top-top-date1 {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px;
  flex-direction: row;
}
.data-item1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(8% - 20px);
  min-width: 50px;
  border-radius: 4px;
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #baa7a7;
}
.bg-purple {
  background: #e3e4e4;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin-top: 5x;
  border-radius: 4px;
  min-height: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.home-bottom {
  position: relative;
  height: auto;
  zoom: 1;
  display: flex;
  /* display: block; */
}

  .home-bottom-left {
    width: 50%;
    display: block;
    background-color: #fff;
    /* margin-bottom: 10px; */
  }
  .home-bottom-center {
    width: 26%;
    display: block;
    margin-left: 10px;
    /* background-color: blue; */
  }
  .home-bottom-right {
    width: 25%;
    display: block;
    margin-left: 10px;
    /* background-color: pink; */
  }

  .home-bottom-left {
    width: 50%;
    display: block;
    /* margin-top: 10px; */
  }
  .home-bottom-center {
    width: 25%;
    display: block;
    margin-left: 10px;
  }
  .home-bottom-right {
    width: 25%;
    display: block;
    margin-left: 10px;
  }


  .home-bottom-left {
    width: 50%;
    display: block;
  }
  .home-bottom-center {
    width: 25%;
    display: block;
    margin-left: 10px;
  }
  .home-bottom-right {
    width: 25%;
    display: block;
    margin-left: 10px;
  }

.home_body_item11 {
  background-color: #fff;
  width: 42%;
  float: left;
  padding: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
  transition: all 0.3s;
}

.home_body_item1 {
  /* margin-top: 5px; */
  background-color: #fff;
  width: 42%;
  float: left;
  padding: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
  transition: all 0.3s;
}
.head_info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;
}
.head_info_label {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0px;
}
.head_info_value {
  color: rgba(0, 0, 0, 0.85);
  font-size: 24px;
  line-height: 32px;
  margin: 0;
}
.home-top-top-ttt {
  width: 95%;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 10px;
  flex-direction: row;
  min-height: 30px;
  background-color: #fafafa;
  justify-content: flex-end;
}
.home-top-top-date2-item:hover {
  transition: all 0.3s;
  background-color: #e6f7ff;
}
.home-top-top-date2-item {
  height: 50px;
  line-height: 51px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 1px solid #c3b7b7;
  font-size: 14px;
}
.home-top-top-date2-name {
  width: 25%;
  padding: 5px;
  text-align: center;
}
.home-top-top-date2-name1 {
}
.chart-container {
  width: 100%;
  height: 400px;
  /* background-color: #1890ff; */
}
.nnnn111 {
  width: 100%;
  height: 400px;
  /* background-color: #1890ff; */
}
.echarts {
  width: 100%;
  height: 400px;
  position: relative;
  left: 7%;
}
.home_body_item1:hover {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.home_body_item11:hover {
  background-color: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 1200px) {
  .home-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* //栅格布局 */
    display: grid;
    grid-template-columns: 1fr;
  }
}
</style>

